/**
 * 自定义指令集合
 * 包含项目中使用的各种自定义指令
 */
import { getCssVar } from '@/utils/theme'

/**
 * 按钮点击节流指令
 * 用于限制按钮点击频率，防止用户频繁点击导致重复提交
 * 使用方法: v-throttle-click 或 v-throttle-click="2000" (自定义时间间隔，单位毫秒)
 */
export const throttleClick = {
  mounted(el, binding) {
    // 获取指令绑定的值，默认为3000毫秒(3秒)
    const interval = binding.value || 1000;
    
    // 记录原始样式
    let originalStyles = {
      backgroundColor: el.style.backgroundColor,
      borderColor: el.style.borderColor,
      color: el.style.color,
      cursor: el.style.cursor,
      pointerEvents: el.style.pointerEvents
    };
    
    // 添加按钮点击处理函数
    el.addEventListener('click', (e) => {
      // 如果按钮已禁用，直接返回
      if (el.disabled || el.classList.contains('is-disabled')) {
        // 阻止事件冒泡和默认行为
        e.stopImmediatePropagation();
        return false;
      }
      
      // 禁用按钮
      el.disabled = true;
      el.classList.add('is-disabled'); // 添加禁用样式类
      el.style.pointerEvents = 'none';
      el.style.cursor = 'not-allowed';
      
      // 判断是否有主题指令
      const hasThemeDirective = el.hasAttribute('data-theme-button');
      
      if (hasThemeDirective) {
        // 使用主题相关的颜色
        const primaryColor = getCssVar('--primary-color');
        const primaryRgb = getCssVar('--primary-color-rgb').split(',');
        
        // 设置禁用样式
        el.style.backgroundColor = `rgba(${primaryRgb}, 0.5)`;
        el.style.borderColor = `rgba(${primaryRgb}, 0.5)`;
        el.style.color = '#ffffff';
      } else {
        // 根据按钮类型处理不同的样式
        if (el.classList.contains('el-button--primary')) {
          el.style.backgroundColor = '#a0cfff';
          el.style.borderColor = '#a0cfff';
        } else if (el.classList.contains('el-button--success')) {
          el.style.backgroundColor = '#b3e19d';
          el.style.borderColor = '#b3e19d';
        } else if (el.classList.contains('el-button--danger')) {
          el.style.backgroundColor = '#fab6b6';
          el.style.borderColor = '#fab6b6';
        } else if (el.classList.contains('el-button--warning')) {
          el.style.backgroundColor = '#f3d19e';
          el.style.borderColor = '#f3d19e';
        }
      }
      
      // 设置定时器，指定时间后恢复按钮状态
      setTimeout(() => {
        el.disabled = false;
        el.classList.remove('is-disabled'); // 移除禁用样式类
        el.style.pointerEvents = originalStyles.pointerEvents;
        el.style.cursor = originalStyles.cursor;
        
        // 恢复原样式
        if (hasThemeDirective) {
          // 恢复主题按钮的原始样式
          const primaryColor = getCssVar('--primary-color');
          el.style.backgroundColor = primaryColor;
          el.style.borderColor = primaryColor;
          el.style.color = '#ffffff';
        } else {
          // 恢复其他按钮的样式
          el.style.backgroundColor = originalStyles.backgroundColor;
          el.style.borderColor = originalStyles.borderColor;
          el.style.color = originalStyles.color;
        }
      }, interval);
    }, true);
  }
};

/**
 * 创建所有自定义指令
 * @returns {Object} 包含所有指令的对象
 */
export function createDirectives() {
  return {
    throttleClick
  };
} 